<template>
  <div class="home">
    <div class="home-toolbar">
      <div></div>
      <div>
        <el-button type="primary" size="large" @click="goNotify">通知记录</el-button>
        <el-button type="primary" size="large" @click="handleClick">邮件接收者配置</el-button>
        <el-button type="primary" size="large" @click="updateCookie">更新cookie</el-button>
      </div>
    </div>
    <el-row>
      <el-col :xl="6" :lg="12" :md="12" :sm="24">
        <div class="stats-item" style="background: linear-gradient(135deg, rgb(103 196 232), rgb(180 245 149));">
          <stat-border></stat-border>
          <div class="stats-item-img">
            <img src="/question.png" alt="">
          </div>
          <div class="stats-item-info">
            <div class="stats-item-info-title">问题数量</div>
            <div class="stats-item-info-desc">平台收录的问题数量统计</div>
            <div class="stats-item-info-count">
              <span>总计: {{ list.question.total }}个</span>
              <span>任务: {{ list.question.schedule }}个</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xl="6" :lg="12" :md="12" :sm="24">
        <div class="stats-item" style="background: linear-gradient(135deg, rgb(252 156 134), rgb(232 113 199));">
          <stat-border></stat-border>
          <div class="stats-item-img">
            <img src="/publisher.png" alt="">
          </div>
          <div class="stats-item-info">
            <div class="stats-item-info-title">题主数量</div>
            <div class="stats-item-info-desc">平台收录的发布者数量统计</div>
            <div class="stats-item-info-count">
              <span>总计: {{ list.publisher.total }}个</span>
              <span>任务: {{ list.publisher.schedule }}个</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xl="6" :lg="12" :md="12" :sm="24">
        <div class="stats-item" style="background: linear-gradient(135deg, rgb(172 138 249), rgb(111 231 209));">
          <stat-border></stat-border>
          <div class="stats-item-img">
            <img src="/answer.png" alt="">
          </div>
          <div class="stats-item-info">
            <div class="stats-item-info-title">答主数量</div>
            <div class="stats-item-info-desc">平台收录的问题答主数量统计</div>
            <div class="stats-item-info-count">
              <span>总计: {{ list.answer.total }}个</span>
              <span>任务: {{ list.answer.schedule }}个</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xl="6" :lg="12" :md="12" :sm="24">
        <div class="stats-item" style="background: linear-gradient(135deg, rgb(168 233 238), rgb(235 245 252));">
          <stat-border></stat-border>
          <div class="stats-item-img">
            <img src="/receiver.png" alt="">
          </div>
          <div class="stats-item-info">
            <div class="stats-item-info-title">通知者数量</div>
            <div class="stats-item-info-desc">平台收录的邮件通知者数量</div>
            <div class="stats-item-info-count">
              <span>总计: {{ list.receiver.total }}个</span>
              <span>启用: {{ list.receiver.schedule }}个</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import type { StatsInter } from '@/typings/interface';
import http from '@/utils/http';
import { ref, type Ref } from 'vue';
import statBorder from '@/components/stat-border.vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const list: Ref<StatsInter> = ref({
  question: {
    total: 0,
    schedule: 0
  },
  publisher: {
    total: 0,
    schedule: 0
  },
  answer: {
    total: 0,
    schedule: 0
  },
  receiver: {
    total: 0,
    schedule: 0
  }
})

function listGet () {
  http('/author/stats', {}).then((res: any) => {
    list.value = res.data
  })
}
listGet()

function handleClick () {
  router.push({
    path: '/receiver'
  })
}
function goNotify () {
  router.push({
    path: '/notify'
  })
}
function updateCookie () {
  http('/author/notify/cookie', {}).then(res => {
    console.log(res)
  })
}
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  padding: 20px 10px;
  position: absolute;
  overflow: auto;
  top: 0;
  left: 0;
  &-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
  }
  .el-col {
    padding: 10px 15px;
  }
  .stats-item {
    height: 200px;
    position: relative;
    display: flex;
    padding: 0 30px 0 50px;
    align-items: center;
    gap: 20px;
    &-info {
      display: flex;
      flex-direction: column;
      color: #fff;
      gap: 10px;
      &-title {
        font-size: 32px;
      }
      &-desc {
        font-size: 16px;
      }
      &-count {
        display: flex;
        gap: 15px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}
</style>